<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Induction Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="550" height="420"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;

// --- Helper Functions ---
function drawCross(x, y, size) {
    const d = size / 2;
    ctx.beginPath();
    ctx.moveTo(x - d, y - d);
    ctx.lineTo(x + d, y + d);
    ctx.moveTo(x + d, y - d);
    ctx.lineTo(x - d, y + d);
    ctx.stroke();
}

// --- Draw Magnetic Field ---
const spacing = 50;
const crossSize = 10;
ctx.save(); // Save context state
ctx.lineWidth = 1.5;
for (let x = 40; x < canvas.width; x += spacing) {
    for (let y = 40; y < canvas.height - 50; y += spacing) {
        drawCross(x, y, crossSize);
    }
}
ctx.restore(); // Restore context state

// --- Define coordinates ---
const railYTop = 80;
const railYBottom = 280;
const railXLeft = 80;
const railXRight = 480;
const rodX = 350;

// --- Draw the Rails and Resistor ---
// Top rail
ctx.beginPath();
ctx.moveTo(railXLeft, railYTop);
ctx.lineTo(railXRight, railYTop);
ctx.stroke();

// Bottom rail
ctx.beginPath();
ctx.moveTo(railXLeft, railYBottom);
ctx.lineTo(railXRight, railYBottom);
ctx.stroke();

// Left vertical part and resistor
const resistorHeight = 50;
const resistorWidth = 20;
const resistorY = (railYTop + railYBottom - resistorHeight) / 2;
// Top vertical line
ctx.beginPath();
ctx.moveTo(railXLeft, railYTop);
ctx.lineTo(railXLeft, resistorY);
ctx.stroke();
// Bottom vertical line
ctx.beginPath();
ctx.moveTo(railXLeft, resistorY + resistorHeight);
ctx.lineTo(railXLeft, railYBottom);
ctx.stroke();

// Resistor rectangle
ctx.strokeRect(railXLeft - resistorWidth / 2, resistorY, resistorWidth, resistorHeight);

// Label R
ctx.font = '22px Times New Roman';
ctx.fillText('R', railXLeft - 45, resistorY + resistorHeight / 2 + 8);

// --- Draw the Sliding Rod MN ---
ctx.beginPath();
ctx.moveTo(rodX, railYTop);
ctx.lineTo(rodX, railYBottom);
ctx.stroke();

// Hooks
ctx.beginPath();
ctx.arc(rodX, railYTop - 6, 8, Math.PI, 2 * Math.PI, false); // Top hook
ctx.stroke();
ctx.beginPath();
ctx.arc(rodX, railYBottom + 6, 8, 0, Math.PI, false);      // Bottom hook
ctx.stroke();

// --- Draw the Velocity Vector ---
const velocityY = (railYTop + railYBottom) / 2;
const velocityStartX = rodX;
const velocityLength = 90;
const velocityEndX = velocityStartX + velocityLength;

ctx.beginPath();
ctx.moveTo(velocityStartX, velocityY);
ctx.lineTo(velocityEndX, velocityY);
ctx.stroke();

// Arrowhead for velocity vector
const arrowSize = 10;
ctx.beginPath();
ctx.moveTo(velocityEndX, velocityY);
ctx.lineTo(velocityEndX - arrowSize, velocityY - arrowSize / 2);
ctx.moveTo(velocityEndX, velocityY);
ctx.lineTo(velocityEndX - arrowSize, velocityY + arrowSize / 2);
ctx.stroke();

// --- Add Labels ---
// M and N
ctx.font = '22px Times New Roman';
ctx.fillText('M', rodX + 15, railYTop - 15);
ctx.fillText('N', rodX + 15, railYBottom + 25);

// v
ctx.font = 'italic 22px Times New Roman';
ctx.fillText('v', velocityStartX + velocityLength / 2 - 5, velocityY - 15);

// Caption
ctx.font = '22px "SimSun", "Songti SC", sans-serif';
ctx.textAlign = 'center';
ctx.fillText('习题 9-9 图', canvas.width / 2, canvas.height - 20);

</script>

</body>
</html>